.editor {
  --color-0: rgb(0 10 20 / 1);
  --color-1: rgb(10 20 40 / 1);
  --color-2: rgb(20 40 80 / 1);
  --color-3: rgb(30 60 120 / 1);
  --color-4: rgb(40 80 160 / 1);
  --color-5: rgb(50 100 200 / 1);
  --color-6: rgb(60 120 240 / 1);
  --color-7: rgb(70 140 255 / 1);
  --color-8: rgb(80 160 255 / 1);
  --color-9: rgb(90 180 255 / 1);
  --color-10: rgb(100 200 255 / 1);
  --color-11: rgb(110 220 255 / 1);
  --color-12: rgb(120 240 255 / 1);
  --color-font-1: rgb(210 210 255 / 1);
  --color-font-2: rgb(220 220 255 / 1);
  --color-font-3: rgb(230 230 255 / 1);
  --color-font-4: rgb(240 240 255 / 1);
  --color-font-5: rgb(250 250 255 / 1);
  --el-color-primary: var(--color-5);
  --el-text-color-regular: var(--color-font-1);
  --el-fill-color-blank: var(--color-2);
  --el-fill-color-light: var(--color-3);
  --el-fill-color-lighter: var(--color-3);
  --el-bg-color-overlay: var(--color-2);
  --el-bg-color: var(--color-2);
  --el-border-color: var(--color-3);
  --el-border-color-light: var(--color-4);
  --el-border-color-lighter: var(--color-4);
  --el-border-color-hover: var(--color-5);
  --el-border-width: 1px;
  --el-border-style: solid;
  /* var有作用域，root里面定义影响不到 */
  --el-border: var(--el-border-width) var(--el-border-style) var(--color-3);
  /* 用作fixed父元素，创建层叠上下级 */
  transform: translate(0, 0);
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  min-height: 800px;
  overflow: hidden;
  background: var(--color-0);
}

.render-container {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.views {
  padding: 0;
  border: 0;
}
.views-title {
  color: var(--color-font-2);
  margin: 10px;
}
.views-container {
  padding-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 0;
  justify-content: space-evenly;
}

.editor :global(.el-collapse) {
  --el-collapse-header-text-color: var(--color-font-2);
  --el-collapse-header-bg-color: var(--color-1);
  --el-collapse-content-bg-color: var(--color-1);
  --el-collapse-content-text-color: var(--color-font-2);
  --el-collapse-border-color: var(--color-2);
}

.editor :global(.drawer .el-tabs) {
  background: var(--color-1);
}
